<template>
  <el-dialog v-model="dialogFormVisible" title="修改商品信息">
    <el-form :model="data.goodsFrom" ref="ruleFormRef" :rules="rules">
      <el-row>
        <el-col :span="12">
          <el-form-item
            label="流水号"
            :label-width="formLabelWidth"
            prop="goods_id"
          >
            <el-input
              v-model="goodsFrom.goods_id"
              autocomplete="off"
              size="large"
              disabled
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="条码"
            :label-width="formLabelWidth"
            prop="goods_code"
          >
            <el-input
              v-model="goodsFrom.goods_code"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="商品名称"
            :label-width="formLabelWidth"
            prop="goods_name"
          >
            <el-input
              v-model="goodsFrom.goods_name"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="单位"
            :label-width="formLabelWidth"
            prop="goods_unit"
          >
            <el-input
              v-model="goodsFrom.goods_unit"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="当前售价"
            :label-width="formLabelWidth"
            prop="goods_price"
          >
            <el-input
              v-model="goodsFrom.goods_price"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item
            label="库存"
            :label-width="formLabelWidth"
            prop="goods_reserve"
          >
            <el-input
              v-model="goodsFrom.goods_reserve"
              autocomplete="off"
              size="large"
            />
          </el-form-item>
        </el-col>

        <el-col :span="12">
          <el-form-item
            label="一级类别"
            :label-width="formLabelWidth"
            prop="onetypes"
          >
            <el-select
              v-model="goodsFrom.onetypes[0].category_oneId"
              @change="handleChange"
              size="large"
            >
              <el-option
                v-for="one in goodsSearch.oneTypeList"
                :key="one.category_oneId"
                :label="one.category_oneName"
                :value="one.category_oneId"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
        <el-col :span="12">
          <el-form-item
            label="二级类别"
            :label-width="formLabelWidth"
            prop="twotypes"
          >
            <el-select
              v-model="goodsFrom.twotypes[0].category_twoId"
              size="large"
            >
              <el-option
                v-for="two in data.twoList"
                :key="two.category_twoId"
                :label="two.category_twoName"
                :value="two.category_twoId"
              ></el-option>
            </el-select> </el-form-item
        ></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="submit(ruleFormRef)">确定</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, defineExpose, computed, watch, reactive } from 'vue'
import { useStore } from 'vuex'
import { reqUpdateGoods } from '@/api/goods'
import { ElMessage } from 'element-plus'
const dialogFormVisible = ref(false)
const formLabelWidth = '140px'
const ruleFormRef = ref()
const data = reactive({
  goodsFrom: {
    goods_id: null,
    goods_code: null,
    goods_name: null,
    goods_unit: null,
    goods_price: null,
    goods_reserve: null,
    onetypes: null,
    twotypes: null
  },
  twoList: [],
  rules: {
    goods_id: [{ required: true, message: '流水号不能为空', trigger: 'blur' }],
    goods_code: [{ required: true, message: '条码不能为空', trigger: 'blur' }],
    goods_name: [
      { required: true, message: '商品名称不能为空', trigger: 'blur' }
    ],
    goods_unit: [{ required: true, message: '单位不能为空', trigger: 'blur' }],
    goods_price: [
      { required: true, message: '当前售价不能为空', trigger: 'blur' }
    ],
    goods_reserve: [
      { required: true, message: '库存不能为空', trigger: 'blur' }
    ],
    onetypes: [
      { required: true, message: '一级类别不能为空', trigger: 'change' }
    ],
    twotypes: [
      { required: true, message: '二级类别不能为空', trigger: 'change' }
    ]
  }
})
const { goodsFrom, rules } = data
const store = useStore()
const { getters } = store
// 切换一级类别的方法
const handleChange = () => {
  data.goodsFrom.twotypes[0].category_twoId = ''
}
// 提交按钮
const submit = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      const result = await reqUpdateGoods({
        goods_id: data.goodsFrom.goods_id,
        goods_code: data.goodsFrom.goods_code,
        goods_name: data.goodsFrom.goods_name,
        goods_unit: data.goodsFrom.goods_unit,
        goods_price: data.goodsFrom.goods_price,
        goods_reserve: data.goodsFrom.goods_reserve,
        goods_category: data.goodsFrom.twotypes[0].category_twoId
      })
      if (result.code === 200 && result.data === 1) {
        ElMessage({
          message: result.msg,
          type: 'success'
        })
      } else {
        ElMessage({
          message: result.msg,
          type: 'warning'
        })
      }
      changeDialogFormVisible()
    } else {
      return false
    }
  })
}
// 取消按钮
const cancel = () => {
  changeDialogFormVisible()
}
// 显示与隐藏的方法
const changeDialogFormVisible = () => {
  dialogFormVisible.value = !dialogFormVisible.value
}
// 仓库中的数据
const goods = computed(() => getters.goods)
const goodsSearch = computed(() => getters.goodsSearch)
watch(goods, (newValue, oldValue) => {
  if (newValue !== undefined) {
    for (const key in goodsFrom) {
      data.goodsFrom[key] = newValue[key]
    }
  }
})
watch(data.goodsFrom, (newValue, oldValue) => {
  const result = goodsSearch.value.twoTypeList.filter((e) => {
    return (
      e.onetypes[0].category_oneId === data.goodsFrom.onetypes[0].category_oneId
    )
  })
  data.twoList = [...result]
})
defineExpose({ changeDialogFormVisible })
</script>

<style lang="scss" scoped>
.el-button--text {
  margin-right: 15px;
}
.el-select {
  width: 300px;
}
.el-input {
  width: 300px;
}
.dialog-footer button:first-child {
  margin-right: 10px;
}
</style>
